<template>
  <div class="app-container">
      <div class="right-detail">
            <div class="cbox">
              <el-form class="form" ref="flt" :rules="rules" label-width="9rem" size="mini">
                <el-row :gutter="15" class="row">
                  <el-col :span="6">
                    <el-form-item label="货种名称：">
                      <el-input   placeholder="请输入货种名称" v-model="from.Code" style="width: 100%" clearable></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="2">
                    <el-form-item label-width="10px">
                      <el-button @click="searchType" type="primary">查询</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <div class="top-type" ref="topType">
                  <div class="btn-area" ref="btnArea">
                    <el-button plain size="mini" type="success" @click="add">新增</el-button>
                    <el-button plain size="mini" type="primary" @click="del('diong')">编辑</el-button>
                    <el-button plain size="mini" type="danger" @click="examine">删除</el-button>
                  </div>
                  <el-table
                      :data="DetailedData"
                      border
                      row-key="pdkId"
                       default-expand-all
                       :tree-props="{children: 'child'}"
                      :height="650"
                      :header-cell-style="{ textAlign: 'center' }"
                      highlight-current-row
                      @row-dblclick='rowdbClick'
                      @row-click="rowClick">
                      <el-table-column size="mini" type="index" show-overflow-tooltip  label="序号" width="50"></el-table-column>
                      <el-table-column size="mini" prop="pdkName" sortable show-overflow-tooltip label="货种名称"></el-table-column>
                      <el-table-column size="mini" prop="pdkCode" sortable show-overflow-tooltip label="货种代码"></el-table-column>
                      <el-table-column size="mini" prop="pdkCreateuser" sortable show-overflow-tooltip label="录入人"></el-table-column>
                      <el-table-column size="mini" align="center" prop="pdkCreatetm" sortable show-overflow-tooltip label="录入时间"></el-table-column>
                      <el-table-column size="mini" prop="pdkModifyuser" sortable show-overflow-tooltip label="修改人"></el-table-column>
                      <el-table-column size="mini" align="center" prop="pdkModifytm" sortable show-overflow-tooltip label="修改时间"></el-table-column>
                  </el-table>
              </div>
        </div>
            <!-- 分页 -->
              <!-- <div>
                  <el-pagination
                    class="pagination"
                    small
                    background
                    ref="pagination"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="Pagination.currentPage"
                    :page-sizes="Pagination.pageSizeList"
                    :page-size="Pagination.pageSize"
                    :layout="Pagination.layout"
                    :total="Pagination.total"
                  ></el-pagination>
              </div> -->
        <!-- 弹出框 新增 编辑 查看 -->
        <el-dialog
          v-el-drag-dialog
          width="40%"
          :title='addText'
          :visible.sync="addShowA"
          v-if="addShowA"
          :close-on-click-modal="false">
              <el-form  label-width="11rem" :model="xzData"  ref="xzData"  size="mini" :rules="addRules">
                  <el-row>
                      <el-col :span="12">
                        <el-form-item prop="pdkCode" label="货种代码：">
                          <el-input maxlength="32" :disabled='disabledA'  v-model="xzData.pdkCode" clearable></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="上级货种：" prop="pdkPdkIdName">
                              <el-popover
                              :disabled='disabled'
                                placement="bottom"
                                width="400"
                                trigger="click"
                                v-model="showpop"
                                >
                                  <el-tree
                                  :disabled='disabled'
                                  :data="organization"
                                  :props="defaultProps"
                                  node-key="pdkPdkId"
                                  default-expand-all
                                  ref="tree"
                                  @node-click="chose"
                                  >
                                  </el-tree>
                                <el-input  slot="reference" :disabled='disabled' :readonly='readonly' placeholder="点击选择上级货种" v-model="xzData.pdkPdkIdName"></el-input>
                              </el-popover>
                          </el-form-item>
                      </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                        <el-form-item prop="pdkName" label="货种名称：">
                          <el-input maxlength="32" :disabled='disabled'  v-model="xzData.pdkName" clearable></el-input>
                        </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                        <el-form-item prop="pdkRemarkText" label="备注：">
                          <el-input maxlength="32" :disabled='disabled' type="textarea" v-model="xzData.pdkRemarkText" clearable></el-input>
                        </el-form-item>
                      </el-col>
                  </el-row>
              </el-form>
               <div  class="dialog-footer">
                  <div class="btn">
                      <el-button size="mini" type="primary" v-if="see" @click="saveEditor('xzData')">保存</el-button>
                      <el-button size="mini"  @click="close">关闭</el-button>
                  </div>
              </div>
        </el-dialog>
  </div>
</template>

<script>
import {
  addMaintain,
  // addMaintainXL,
  delMaintain,
  editMaintain,
  delMaintainXL
} from '@/request/api'
import resizeMixin from '@/mixins/resize'
import paginationMixin from '@/mixins/pagination'
export default {
  mixins: [resizeMixin,paginationMixin],
  data(){
    return{
      disabledA:false,
      disabled:false,
      readonly:false,
      showpop: false,
      from:{
        Code:'',
      },
      item:{
        item:true,
        itemA:false
      },
      itemData:[],
      diong:'E',
      addText:'',
      addShowA:false, // 新增 编辑
      see:true, //保存按钮
      DetailedData:[], //主列表的数据
      xzData:{},// 传给新增 编辑弹出框的数据
      data1:[],
      data2:[],
      //表单验证 新增 编辑
      addRules:{
        pdkCode:[
          { required: true, message: '请填写货种代码', trigger:'blur'}
        ],
        pdkPdkIdName:[
          { required: true, message: '请选择上级货种', trigger:'change'}
        ],
        pdkName:[
          { required: true, message: '请填写货种名称', trigger:'blur'}
        ],
      },
      defaultProps: {
        children: 'child',
        label: 'pdkName'
      },
    }
  },
  computed: {
    organization() {
      return this.data1.map( item => {
        item['pdkNameA']  = item.pdkName
        return item
      })
    }
  },
  created(){

  },
  mounted(){
    this.dataList()
  },
  methods:{
    chose(data) {
      // 上级货种)
      this.xzData.pdkPdkIdName = data.pdkName
      this.xzData.pdkPdkId = data.pdkId
      this.showpop = false
    },
    dataList() {
      // let PageSizes=this.Pagination.pageSize.toString()
      // let PageIndexs=this.Pagination.currentPage.toString()
      delMaintainXL({pdkName:this.from.Code}).then(res=>{
        this.data1 = res.data.FTKJWLHYPT
        this.DetailedData = res.data.FTKJWLHYPT[0].child
        // this.Pagination.total=res.data.total.FTKJWLHYPT
      })
    },

    //搜索
    searchType(){
      this.dataList()
    },
    //新增
    add(){
      this.addText='货种信息'
      this.diong=''
      this.addShowA=true
      this.see=true
      this.readonly = true
      this.disabled = false
      this.disabledA = false
      this.xzData = {
        pdkPdkIdName:'',
        pdkPdkId:'',
        pdkName:'',
        pdkCode:'',
        pdkGoodstypefg:'',
        pdkRemark:'',
        // pdkCreateuser:'',
        pdkCreatetm:'',
        pdkEptId:'-1',
        pdkRemarkText:'',
      }


    },
    //编辑
    del(){
      if(Object.keys(this.itemData).length){
        // let obj = Object.assign(this.itemData)
        this.xzData = this.itemData
        // 循环遍历匹配对应值 xzData.pdkPdkIdName
        this.xzData.pdkPdkIdName = this.searchItem(this.xzData,this.organization)
        this.addText='编辑'
        this.diong='E'
        this.addShowA=true
        this.see = true
        this.disabled = false
        this.disabledA = true
        this.readonly = true
      }else{
        this.$alert('请选择需要编辑的数据', '提示', {
          confirmButtonText: '确定'
        })
        return false
      }
    },

    // 递归查询
    searchItem(obj,arr){
      let name = ''

      for(let i=0;i<arr.length;i++){
        let ele = arr[i]
        if(ele.pdkId === obj.pdkPdkId){
          name = ele.pdkName
          break
        }else{
          if(ele.child && ele.child.length){
            name = this.searchItem(obj,ele.child)
          }
        }
      }
      return name
    },
    //删除
    examine(){
      if (Object.keys(this.itemData).length == 0) {
        this.$alert('请选择需要删除的数据', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.$confirm('您确认要删除此数据吗?', '提示', {
        closeOnClickModal: false
      }).then( () =>{
        delMaintain({pdkId:this.itemData.pdkId,pdkEptId:'-1'}).then(res=>{
          if(res.success !== '1'){
            this.$message ({
              type: 'success',
              message: '删除失败'
            })
            return
          }else{
            this.$message ({
              type: 'success',
              message: '删除成功'
            })
            this.dataList()
            this.close()
          }
        })
      })

    },
    //双击查看
    rowdbClick(row){
      // this.viewDetails()
      this.addText='查看货种管理信息'
      this.addShowA=true
      this.see=false
      this.xzData = row
      this.xzData.pdkPdkIdName = this.searchItem(row,this.organization)

      this.readonly = true
      this.disabled = true
      this.disabledA = true
    },

    //新增 编辑  点击保存
    saveEditor(xzData){
      this.$refs[xzData].validate((valid) => {
        if (valid) {
          if (this.diong ==='E') {
            editMaintain(this.xzData).then(res=>{
              if(res.success !== '1'){
                this.$message ({
                  type: 'success',
                  message: '编辑失败'
                })
                return
              }else{
                this.xzData = []
                this.$message ({
                  type: 'success',
                  message: '编辑成功'
                })
                this.dataList()
                this.close()
              }
            })
          }else{
            addMaintain(this.xzData).then(res=>{
              if(res.success !== '1'){
                this.$message ({
                  type: 'success',
                  message: '添加失败'
                })
              }else{
                this.$message ({
                  type: 'success',
                  message: '添加成功'
                })
                this.close()
                this.dataList()
                this.$refs[xzData].resetFields()
              }
            })

          }
        } else {
          return false
        }
      })
    },
    // 关闭弹出框
    close(){
      this.addShowA=false
    },
    //当前行数据
    rowClick(row){
      this.itemData = row
    }
  }
}
</script>

<style  lang="scss" scoped>
.el-select {
  width: 100%;
}
.app-container {
  overflow: hidden;
  background-color: #fff;
  position: relative;
  height: 100%;
}
.tree {
  padding-right: 20px;
  font-size: 1.4rem;
}
.right-detail {

  .top-type {
    width: 100%;
    height: 100%;
    margin-top: 20px;
    table {
      max-width: 100%;
      font-size: 1.4rem;
      td {
        min-width: 170px;
        line-height: 3rem;
        padding-right: 3rem;
      }
    }
  }
  .bottom-code {
    width: 100%;
    height: 100%;
  }
}
.codeNumberCode {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 40px;
}
.pagination {
  margin: 0.3rem 0;
}
.dialog-footer {
    position: relative;
    width: 100%;
    height: 40px;
    .btn {
      position: absolute;
      right:15px;
    }
  }
  .block{
    float: left;
  }
</style>
